<template>
  <div class="home">
      <div class="search">
        <div class="border">
          <span>@</span>
          <span>搜索优选商品</span>
        </div>
      </div>
    <van-pull-refresh :loosing-text="vauleText" v-model="isLoading" @refresh="onRefresh">
      <slider :bannerList="bannerList" :setHeight="setHeight"></slider>
      <div class="verticals">
        <div class="bgimg">5555</div>
        <div class="sp">
          <div class="height">
            <van-swipe :autoplay="2000" vertical :show-indicators="false" :touchable="false">
              <van-swipe-item v-for="(item, index) in verticalData" :key="index">
                <span class="text">
                  {{item}}
                </span>
              </van-swipe-item>
            </van-swipe>
          </div>
        </div>
        <!-- <van-button type="danger" size="mini">危险按钮</van-button> -->
      </div>
      <div class="goods-wrapper">
        <!-- 三套模板 -->
        <div class="hot-goods">
          <div class="hot-left"></div>
          <div class="hot-right">
            <div class="hot-right-top"></div>
            <div class="hot-right-bottom"></div>
          </div>
        </div>
      </div>
      <div class="slide-box">
        <div class="slide-item" v-for="(item, index) in bannerList" :key="index">
          <img :src="item" alt="" class="img">
        </div>
        <div class="slide-item more">更多</div>
      </div>
      <div>
       <button class="tag-read" :data-clipboard-text="content" @click="copy">立即阅读</button>
      </div>
      <div id="qrcode" v-for="item in 2" :key="item.id">二维码位置</div>
      <div style="margin-bottom: 600px;font-size: 10px;">
        <timer></timer>
      </div>
    </van-pull-refresh>

  </div>
</template>

<script>
import slider from '../common/slider'
import timer from '../common/timer'
import QRCode from 'qrcodejs2'
import Clipboard from 'clipboard'
// import Vue from 'vue'
// import { PullRefresh } from 'vant'
// Vue.use(PullRefresh)
export default {
  data() {
    return {
      bannerList: [
        'https://bm.hybhz.com.cn:8443/group1/M00/00/01/ooYBAFp6kGWAW0aqAAH1CQf4zBs952_1400x1400.jpg',
        'https://bm.hybhz.com.cn:8443/group1/M00/00/01/oYYBAFp6kO-AGNYzAAEjLdHqMaU837_1400x1400.jpg',
        'https://bm.hybhz.com.cn:8443/group1/M00/00/07/ooYBAFryTuaAXy-mAA0k6xwbkzM111_1400x1400.jpg'
      ],
      verticalData: ['1', '2', '3'],
      setHeight: 4,
      lossingText: ['666', '999', '777', '888'],
      vauleText: '',
      isLoading: false,
      content: 'nihao'
    }
  },
  components: {
    slider,
    timer
  },
  mounted() {
    this.qrcode()
  },
  methods: {

copy() {
        var clipboard = new Clipboard('.tag-read')
        clipboard.on('success', e => {
          console.log('复制成功')
          // 释放内存
          clipboard.destroy()
        })
        clipboard.on('error', e => {
          // 不支持复制
          console.log('该浏览器不支持自动复制')
          // 释放内存
          clipboard.destroy()
        })},
    qrcode() {
      let qrcode = new QRCode('qrcode', {
        width: 100,
        height: 100,
        text: 'https://www.baidu.com',
        // render: 'canvas',
        background: '#ccc',
        foreground: '#ff0',
        colorLight: '#ccc',
        colorDark: 'hotpink'
      })
      console.log(qrcode)
    },
    onRefresh() {
      setTimeout(() => {
        // this.$toast('刷新成功')
        this.isLoading = false
        this.count++
      }, 500)
      this.vauleText = this.lossingText[Math.floor(Math.random() * this.lossingText.length)]
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../common/sass/mixin.scss';
@import '../../common/sass/variable.scss';
.home {
  .search {
    // position: relative;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 2;
    background-color: $bg-color;
    height: 44px; // @include border-right(hotpink, 0.5)
  }
  .verticals {
    position: relative;
    // @include border-bottom(1);
    box-sizing: border-box;
    width: 100%;
    padding: 0 10px;
    height: 40px;
    line-height: 40px;
    display: flex;
    .bgimg {
      flex: 0 0 40px;
      width: 40px;
      background-color: saddlebrown;
    }
    .sp {
      width: 100%;
      flex: 1;
      display: flex;
      background-color: green;
      align-items: center;
      .height {
        width: 100%;
        height: 25px;
        line-height: 25px;
        .van-swipe {
          width: 100%;
          height: 25px;
          background-color: hotpink;
        }
      }
    }
  }
  .goods-wrapper {
    .hot-goods {
      display: flex;
      height: 180px;
      .hot-left {
        width: 55%;
        height: 100%;
        background-color: hotpink;
      }
      .hot-right {
        width: 45%;
        height: 100%;
        display: flex;
        flex-direction: column;
        .hot-right-top {
          flex: 1;
          background-color: skyblue;
        }
        .hot-right-bottom {
          flex: 1;
          background-color: salmon;
        }
      }
    }
  }
  .slide-box {
    /* margin-top: 200px; */
    display: -webkit-box;
    /* display: flex; */
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    &::-webkit-scrollbar {
    display: none;
    }
    .slide-item {
      width: 200px;
      height: 100px;
      background-color: #ccc;
      margin-right: 10px;
      .img {
        width: 100%;
        height: 100%; // font-size: 0;
        // border: none;
      }
    }
    .more {
      display: flex;
      width: 50px;
      align-items: center;
      justify-content: center;
      font-size: 14px;
    }
  }
}
</style>
